<template>
  <div ref="chartRef" :style="props.cStyle"></div>
</template>
<script setup name="customChart">
import * as eCharts from 'echarts'
const props = defineProps({
  cStyle: {
    type: Object,
    default: () => ({ width: '100%', height: '500px' })
  }
})
const emit = defineEmits(['init'])
let chat = null
let data = null
const chartRef = ref(null)
function initChart() {
  if (!chat && chartRef.value) {
    chat = eCharts.init(chartRef.value)
    data && chat.setOption(data)
    emit('init', chat)
    data = null
  }
}
onMounted(() => {
  initChart()
})
defineExpose({
  setOption(opt) {
    chat.setOption(opt)
  },
  resize() {
    chat.resize()
  },
  setData(data) {
    initChart()
    if (chat) {
      chat.setOption(data)
    } else {
      data = data
    }
  }
})
</script>
